<template>
    <el-main>
       <el-row>
             <el-col :span=8>
                <el-input v-model="input" placeholder="请输入内容" size="mini"></el-input>
            </el-col>
            <el-col :span=3 offset="1">
                <el-button type="success" class="button" size="mini" @click='handleSearch()'>查询</el-button>
            </el-col>
            <el-col :span="3">
                <el-button type="success" class="button" @click="handleEdit('添加',null)" size="mini">添加</el-button>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple-light">
                    <el-button type="success" class="button" @click='exportExcel()' size="mini">导出</el-button>
                </div>
            </el-col>
        </el-row>
        <!-- 列表 -->
        <el-table @row-click="clickRow" id="out-table" ref="multipleTable" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange"
            v-loading="loading" border>
            <el-table-column prop="id" label="流水号" width="100">
            </el-table-column>
            <el-table-column prop="type" label="资产类型" width="50">
            </el-table-column>
            <el-table-column prop="assetTag" label="资产名" width="150">
            </el-table-column>
            <el-table-column prop="inTime" label="注册时间">
            </el-table-column>
            <el-table-column prop="outTime" label="出库时间" width="180">
            </el-table-column>
            <el-table-column prop="state" label="状态">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="80">
                <template slot-scope="scope" v-if="canOperation(scope.row.state)">
                    <el-button @click="showDialog('删除')" type="danger" size="mini">删除</el-button>
                    <!-- <el-button @click="showDialog('编辑')" type="primary" size="mini">编辑</el-button> -->
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="paginations.current_page"
            :page-sizes="paginations.page_sizess" :page-size="paginations.page_size" :layout="paginations.layout"
            :total="tableData.length">
        </el-pagination>



        

        <!-- 归还弹出框 -->
        <el-dialog title="删除" :visible.sync="dia_visitable_del" width="30%">
            <span>你是否要删除该设备</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dia_visitable_del = false">取 消</el-button>
                <el-button type="primary" @click="del()">确 定</el-button>
            </span>
        </el-dialog>



        <!-- 编辑弹出框
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
            <el-form :model="rowData" :rules="rules">
                <el-form-item label="流水号" :label-width="formLabelWidth" prop="serialNumber">
                    <el-input v-model="rowData.serialNumber"  readonly=""></el-input>
                </el-form-item>
                <el-form-item label="资产类型" :label-width="formLabelWidth" prop="type">
                    <el-select v-model="rowData.type" placeholder="请选择资产类型" @change="changeType">
                        <el-option label="设备" value="1"></el-option>
                        <el-option label="汽车" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="资产名" :label-width="formLabelWidth" prop="tag">
                    <el-select v-model="rowData.tag" placeholder="请选择资产">
                        <el-option v-for="item in assetTags" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleEditOne('id')">确 定</el-button>
            </div>
        </el-dialog> -->

        <!-- 申请资产对话框 -->
        <el-dialog title="申请资产" :visible.sync="dia_visitable_register" >
            <el-form :model="registerData" >
                <el-form-item label="资产类型" :label-width="formLabelWidth" prop="type">
                    <el-select v-model="registerData.type" placeholder="请选择资产类型" @change="changeType">
                        <el-option label="设备" value="设备"></el-option>
                        <el-option label="汽车" value="汽车"></el-option>
                        <el-option label="图书" value="图书"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="资产名" :label-width="formLabelWidth" prop="assetTag">
                    <el-select v-model="registerData.assetTag" placeholder="请选择资产">
                        <el-option v-for="item in assetTags" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dia_visitable_register = false">取 消</el-button>
                <el-button type="primary" @click="register()">注 册</el-button>
            </div>
        </el-dialog>


    </el-main>
</template>

<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
import axios from "axios";
export default {
  name: "User",
  data() {
    var validateEmail = (rule, value, callback) => {
      let mal = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
      if (!value) {
        return callback(new Error("不能为空"));
      }
      if (!mal.test(value)) {
        callback(new Error("请输入正确邮箱"));
      } else {
        callback();
      }
    };
    return {
      multipleSelection: [],
      paginations: {
        total: 0,
        current_page: 1,
        page_sizes: [10, 20, 30, 40],
        page_size: 10,
        layout: "total, sizes, prev, pager, next, jumper"
      },
      userName: "admin",
      tableData: [], //表格数据
      assetTags: [], //资产名数据
      rowData: {}, //行数据
      dialogVisible: false,
      dialogFormVisible: false,
      dia_visitable_register: false,
      dia_accessVisitable: false,
      dia_visitable_del: false,
      formLabelWidth: "120px",
      loading: false,
      dialogTitle: "",
      input: "",
      registerData: {
        type: "",
        assetTag: ""
      },
    };
  },
  methods: {
    changeType(val) {
      var url1 = global.url + '/';
      switch(val){
        case '设备':url1+='device/items';break;
        case '汽车':url1+='car/items';break;
        case '图书':url1+='book/items';break;
      }
      axios({
        method: "get",
        url: url1,
        headers: {
          "Content-type": "application/x-www-form-urlencoded"
        },
      })
        .then(res => {
          this.loading = false;
          let data = res.data;
          if (data.code === 2000) {
            this.assetTags = data.data;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    clickRow(row) {
      this.rowData = row;
    },
    showDialog(dialogName) {
      if (dialogName === "删除") {
        this.dia_visitable_del = true;
      } else if (dialogName === "注册资产") {
        this.dia_visitable_register = true;
      }
    },
    // 申请
    register() {
      axios({
        method: "post",
        url: global.url + "/register",
        headers: {
          "Content-type": "application/x-www-form-urlencoded"
        },
        params: this.registerData
      })
        .then(res => {
          this.loading = false;
          let data = res.data;
          if (data.code === 2000) {
            this.dia_accessVisitable = false;
            this.$message({
              message: "注册成功",
              type: "success"
            });
            this.reloadPage();
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 删除
    del() {
      axios({
        method: "post",
        url: global.url + "/register/del",
        headers: {
          "Content-type": "application/x-www-form-urlencoded"
        },
        params: {
          id: this.rowData.id
        }
      })
        .then(res => {
          this.loading = false;
          let data = res.data;
          if (data.code === 2000) {
            this.dia_accessVisitable = false;
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.reloadPage();
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //报修
    repair() {
      axios({
        method: "post",
        url: global.url + "/repair",
        headers: {
          "Content-type": "application/x-www-form-urlencoded"
        },
        params: {
          serialNumber: this.rowData.serialNumber
        }
      })
        .then(res => {
          this.loading = false;
          let data = res.data;
          if (data.code === 2000) {
            this.dia_accessVisitable = false;
            this.$message({
              message: "报修成功",
              type: "success"
            });
            this.reloadPage();
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(val);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // search
    handleSearch() {
      this.$message("test");
    },
    // 导出Excel
    exportExcel() {
      console.log("id");
      /* generate workbook object from table */
      var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
      /* get binary string as output */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], {
            type: "application/octet-stream"
          }),
          "sheetjs.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    //设置数据
    setData() {
      this.loading = true;
      axios({
        method: "get",
        url: global.url + "/register",
        headers: {
          "Content-type": "application/x-www-form-urlencoded"
        }
      })
        .then(res => {
          this.loading = false;
          let data = res.data;
          if (data.code === 2000) {
            this.tableData = data.data;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    reloadPage() {
      this.setData();
      this.dia_accessVisitable = false;
      this.dia_visitable_del = false;
      this.dia_visitable_register = false;
    },
    canOperation(state) {
      if (state != "使用中") {
        return true;
      } else {
        return false;
      }
    }
  },
  mounted() {
    this.setData();
  }
};
</script>

<style scoped>
.button {
  margin-bottom: 10px;
}
</style>